<template>
  <div>
    <el-container style="min-height: 100vh">
      <el-aside :width="sideWith+'px'" class="el-aside" style="background-color: rgb(52,64,88);box-shadow: 2px 0 6px rgb(0 21 41 / 35%);" >
        <Aside class="aside" :isCollapse="isCollapse"  :menu = "user.menu" style="padding-bottom: 20px"/>
      </el-aside>
      <el-container>
        <el-header style="font-size: 12px;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
        </el-header>

        <el-main >
          <!--当前页面子路由在router-view里面展示-->
          <router-view @refreshUser="getUser" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Aside from "../components/Aside";
import Header from "../components/Header";

export default {
  data(){
    return {
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWith:200,
      user:{},
    }
  },
  created() {
    //从后台获取最新的数据
    this.getUser()
  },
  components:{
    Aside,
    Header
  },
  methods:{
    collapse(){
      this.isCollapse = !this.isCollapse;
      if(this.isCollapse){
        this.sideWith = 50;
        this.collapseBtnClass='el-icon-s-unfold';
      }else {
        this.sideWith=200;
        this.collapseBtnClass='el-icon-s-fold';
      }
    },
    getUser(){
      let username =localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).userName : {}
      this.request.get("/user/username/"+username).then(res =>{
        //重新赋值给user数据
        this.user = res.data
      })
    }
  }
}
</script>

<style>
/*html,*/
/*body,*/
/*#app,*/
/*.el-container {*/
/*  height: 100%;*/
/*  width: 100%;*/
/*}*/
/*.aside {*/
/*  background-color: rgb(52,64,88);*/
/*  overflow: hidden;*/
/*}*/
/*解决收缩菜单文字不消失问题*/
</style>